<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传课程</title>
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<style type="text/css">
.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=88); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 55%; 
    height: 55%; 
    padding: 20px; 
    border: 4px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
}
</style>
</head>
<body>
	<div class="panel panel-default" style="width: 90%; margin:20px auto;">
		<div class="panel-heading">
	        <span class="panel-title">上传课程</span>
	    </div>
	    <div class="panel-body">
			<div role="form">
                <div class="form-group">
					<label>课程系列</label>
				    <div class="input-group-btn">
					    <select class="form-control">
					    <#if courseSeries??>
						<#list courseSeries as seri>
						<option value="${seri.id!}">${seri.name}</option>
						</#list>
						</#if>
					    </select>
				    </div> 
			        <span class="input-group-btn">  
			            <button class="btn btn-primary" data-toggle="modal" data-target="#addSeriesModal">添加系列</button>  
			        </span>
				</div>
				<div class="form-group">
					<label for="title">课程标题</label>
					<input type="text" class="form-control" id="title" placeholder="课程标题">
				</div>
				<div class="form-group">
					<label for="descr">课程简介</label>
					<textarea class="form-control" id="descr" placeholder="课程简介"  rows="3"></textarea>
				</div>
				<div class="form-group">
					<label for="price">课程价格</label>
					<input type="text" class="form-control" id="price" placeholder="课程价格">
				</div>
				<div class="form-group">
					<label for="radioTimeLong">语音时长</label>
					<input type="text" class="form-control" id="radioTimeLong" placeholder="语音时长">
				</div>
				<div class="form-group">
					<label for="radionFile">课程语音</label>
					<input type="file" id="radioFile" accept="audio/mpeg,audio/x-wav">
				</div>
				<div class="form-group">
					<label for="radionFile">课程封面</label>
					<input type="file" id="imgFiles" multiple accept="image/*">
				</div>
				<button class="btn btn-primary btnUploadCourse" data-loading-text="拼命上传中...">上传</button>
			</div>
	    </div>
	</div>
	<div id="light" class="white_content" align="center">
		<div id="msg" style="width:80%;margin:0 40px 40px 40px;font-size:16px;"></div>
		<button class="btn btn-info" onclick = "closeDialog()" style="position:relative;">关闭</button>
	</div>
	<div id="fade" class="black_overlay"></div>
	<div class="prompt"></div>
	<!-- 添加系列 -->
	<div class="modal fade" id="addSeriesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">添加系列</h4>
	            </div>
	            <div class="modal-body">
	            <input class="form-control" id="addSeriesInput" placeholer="课程系列名称">
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary addSeries">添加</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">上传提示</h4>
      </div>
      <div class="modal-body">
        正在上传,请稍候。。。
      </div>
    </div>
  </div>
</div>
	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/common-func.js?v=${jsVersion}"></script>
	<script type="text/javascript" src="${BasePath}/js/teacherAjaxHeader.js?v=${jsVersion}"></script>
	<script>
	//禁用返回
//     window.history.pushState(null, null, "#");
// 	window.addEventListener("popstate", function(e) {
// 		window.history.pushState(null, null, "#");
// 	});

    $(".addSeries").click(function(){
    	var seriesName = $("#addSeriesInput").val();
    	var memberId = '${memberEntity.id}';
    	
    	var ret = addSeries(memberId, seriesName);
    	if(ret == true){
    		alert("添加成功");
    	}
    	else{
    		alert("添加成功");
    	}
    	location.reload();
    });
    
	$(".btnUploadCourse").click(function(){
		var $btn = $(this);
		var course = {
			seriesId: $('option:selected').val(),
			memberId: "${memberEntity.id}",
			title: $("#title").val(),
			descr: $("#descr").val(),
			price: $("#price").val(),
			timeLength: $("#radioTimeLong").val()
		};
		if(course.seriesId == '0') course.seriesId = null;
		if(isNull(course.title)){
			showMsg('请输入课程标题！');
			return;
		}
		if(isNull(course.descr)){
			showMsg('请输入课程简介！');
			return;
		}
		course.descr = course.descr.trim();
		if(isNull(course.price)){
			showMsg('请输入课程价格！');
			return;
		}
		if(isNull(course.timeLength)){
			showMsg('请输入课程时长！');
			return;
		}
		if($("#radioFile").val() == ""){
			showMsg('请选择课程语音文件！');
			return;
		}
		
		if($("#imgFiles").val() == ""){
			showMsg('请选择图片！');
			return;
		}
		
		//radionFile
		var formData = new FormData();
		
        formData.append("memberId", "${memberEntity.id}");
        formData.append("seriesId", course.seriesId);
        formData.append("title", $("#title").val());
        formData.append("descr", $("#descr").val());
        formData.append("price", $("#price").val());
        formData.append("timeLength", $("#radioTimeLong").val());
        formData.append("file",$("#radioFile")[0].files[0]);
        formData.append("image",$("#imgFiles")[0].files[0]);
        $('#loading').modal('show');
        $.ajax({
            url : "${BasePath}/page/teacher/addCourse", 
            type : 'POST', 
            data : formData, 
            processData : false, // 告诉jQuery不要去处理发送的数据
            contentType : false, // 告诉jQuery不要去设置Content-Type请求头
            beforeSend:function(){
            	$btn.button('loading');
            },
            success: function(data) {
            	$btn.button('reset');
            	console.log(data);
            	$('#loading').modal('hide');
            	if(data.result){
            		alert("上传成功！");
            		location.href = "${BasePath}/page/teacher/courses";
            	}
            	else{
            		alert("上传失败！");
            	}
            }, 
            error : function(err) { 
            	$('#loading').modal('hide');
            	$btn.button('reset');
                var errMsg = "上传出错，详情：" + SON.stringify(err);
                console.log(errMsg);
                alert(errMsg);
            } 
        });
	});
	
	function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
    
    function showMsg(msg){
  		$("#msg").html(msg);
  		openDialog();
  	}
    
    function addSeries(memberId, seriesName){
		var courseRequest = {
			memberId: memberId,
			name: seriesName
		};
		var url = '${BasePath}/api/series/add';
		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
    
	</script>
</body>
</html>